<template>
  <div class="wrapper" style="position: absolute; z-index: 200;top: 14px;width: auto">
    <div class="selectModelType" style="">
      <div class="tip"><p>默认控件的显示与隐藏</p></div>

      <template v-for="(item,index) in attr">
        <div style="text-align: left">
          <el-checkbox   @change="ctrAttrVis(index)" class="chb"
                         v-model="item.value"
          >{{item.lable}}</el-checkbox>
        </div>
      </template>
    </div>
<!--    <Vcesium @loadeds="otherOperations"></Vcesium>-->
  </div>
</template>

<script>
  // import Vcesium from "../cesiumViewer";
  export default {
    name: "helloCesium",
    data(){
      return{
        attr:[{
          lable:"动画",
          value:true,
          key:"animation"
        },{
          lable:"图层选择控件",
          value:true,
          key:"layersel"
        },{
          lable:"地名查找",
          value:true,
          key:"find",
        },{
          lable:"时间线",
          value:true,
          key:"timeline",
        },{
          lable:"二三维切换",
          value:true,
          key:"two2three"
        },{
          lable:"帮助信息",
          value:true,
          key:"help"
        },{
          lable:"信息框",
          value:true,
          key:"info"
        },{
          lable:"主页",
          value:true,
          key:"home"
        },{
          lable:"版权Logo信息",
          value:true,
          key:"logo"
        }
        ]
      }
    },
    components:{
      // Vcesium
    },
    mounted() {
      // this.init()
    },

    methods:{
      init(){
        mapBaseF.setContainer('','','','','','','','')
        // mapBaseF.setContainer('none','none','none','none','none','none','none','none')
        //设置控件的隐藏
        // viewer.cesiumWidget.creditContainer.style.display = "none"; //隐藏版本信息
        // viewer.animation.container.style.display ='none';//隐藏动画控件
        // viewer.timeline.container.style.display ='none';//隐藏时间线控件
        // viewer.fullscreenButton.container.style.display ='none'  ;//隐藏全屏控件
        //
        // viewer.geocoder.container.style.display ='none';//隐藏地名查找控件
        //
        // viewer.homeButton.container.children[1].style.display ='none';//home
        // viewer.homeButton.container.children[2].style.display ='none';//二三维
        // viewer.homeButton.container.children[3].style.display ='none';//底图
        // viewer.homeButton.container.children[5].style.display ='none';//问号

        //视角飞行至目的地
        // viewer.camera.flyTo({
        //   destination:Cesium.Cartesian3.fromDegrees(113.5,33.0,500000),
        //   orientation: {
        //     heading:Cesium.Math.toRadians(360),
        //     pitch:Cesium.Math.toRadians(-70),
        //     roll: Cesium.Math.toRadians(0), //默认值8
        //   },
        // })
        viewer.camera.flyTo({destination:Cesium.Cartesian3.fromDegrees(115,30,20000000)});
      },
      ctrAttrVis(v){
        let key = this.attr[v].key
        switch (key){
          case "animation":
            viewer._animation.container.style.display = this.attr[v].value?"block":"none"
            break
          case "info":
            viewer._infoBox.container.style.display=this.attr[v].value?"block":"none"
            break
          case "help":
            viewer.baseLayerPicker.container.children[5].style.display=this.attr[v].value?"inline":"none"
            break
          case "timeline":
            viewer._timeline.container.style.display=this.attr[v].value?"block":"none"
            break
          case "logo":
            viewer.cesiumWidget.creditContainer.style.display = this.attr[v].value?"block":"none";
            break
          case "two2three":
            viewer.baseLayerPicker.container.children[2].style.display=this.attr[v].value?"inline":"none"
            break
          case "home":
            viewer.baseLayerPicker.container.children[1].style.display=this.attr[v].value?"inline":"none"
            break
          case "find":
            viewer.baseLayerPicker.container.children[0].style.display=this.attr[v].value?"inline":"none"
            break
          case "layersel":
            viewer.baseLayerPicker.container.children[3].style.display=this.attr[v].value?"inline":"none"
            break
        }

      }
    },
    destroyed() {
      if(this.$store.state.currentFrameNameStore === 'cesium')
      mapBaseF.setContainer('none','none','none','none','','','none','none')
    }
  }
</script>

<style scoped>

</style>
